<!DOCTYPE html>
<html>
<head>

    {% include 'favicon.html' %}

    {% if options.tailwind %}
            {% if not options.no_internet %}
                <link rel="stylesheet" href="https://unpkg.com/tailwindcss@^2.0/dist/base.min.css">
                <link rel="stylesheet" href="https://unpkg.com/tailwindcss@^2.0/dist/components.min.css">
                <link rel="stylesheet" href="https://unpkg.com/@tailwindcss/typography@0.4.x/dist/typography.min.css">
                <link rel="stylesheet" href="https://unpkg.com/tailwindcss@^2.0/dist/utilities.min.css">
            {% else %}
                <link href="/templates/local/tailwind/base.css" rel="stylesheet">
                <link href="/templates/local/tailwind/components.css" rel="stylesheet">
                <link href="/templates/local/tailwind/typography.css" rel="stylesheet">
                <link href="/templates/local/tailwind/utilities.css" rel="stylesheet">
            {% endif %}
            <style>
                {% include 'css/form.css' %}
            </style>
        {% endif %}

    {% if not options.no_internet %}
        <link href="https://fonts.googleapis.com/css?family=Roboto:100,300,400,500,700,900|Material+Icons"
              rel="stylesheet" type="text/css">
        <link href="https://cdn.jsdelivr.net/npm/ionicons@^4.0.0/dist/css/ionicons.min.css" rel="stylesheet">
        <link href="https://cdn.jsdelivr.net/npm/@mdi/font@^3.0.0/css/materialdesignicons.min.css" rel="stylesheet">
        <link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.9.0/css/all.css"/>
        <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/animate.css/3.7.0/animate.min.css"/>
        {% if options.quasar_version %}
            <link href="https://cdn.jsdelivr.net/npm/quasar@{{ options.quasar_version }}/dist/quasar.min.css"
                  rel="stylesheet" type="text/css">
        {% else %}
            <link href="https://cdn.jsdelivr.net/npm/quasar@^1.0.3/dist/quasar.min.css" rel="stylesheet"
                  type="text/css">
        {% endif %}
    {% else %}
        <link rel="stylesheet" href="/templates/local/robotofont/robotofont.css"/>
        <link rel="stylesheet" href="/templates/local/ionicons/ionicons.css"/>
        <link rel="stylesheet" href="/templates/local/materialdesignicons/iconfont/material-icons.css"/>
        <link rel="stylesheet" href="/templates/local/fontawesome/css/all.min.css"/>
        <link rel="stylesheet" href="/templates/local/animate.css"/>
        <link rel="stylesheet" href="/templates/local/quasar.css"/>
    {% endif %}

    <style>
        {{ page_options.css | safe}}
    </style>

    {{ page_options.head_html | safe }}

    {% include 'optional_packages.html' %}

</head>


<body class="" style="{{ page_options.body_style }}" class="{{ page_options.body_classes }}">
{% if html %}
    {{ html | safe }}
{% else %}
    {{ page_options.body_html | safe }}

    {% if not options.no_internet %}
        <script src="https://code.jquery.com/jquery-3.3.1.min.js"></script>
        <script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.6.11/vue.min.js"></script>
        {% if options.quasar_version %}
            <script src="https://cdn.jsdelivr.net/npm/quasar@{{ options.quasar_version }}/dist/quasar.umd.min.js"></script>
        {% else %}
            <script src="https://cdn.jsdelivr.net/npm/quasar@^1.8.5/dist/quasar.umd.min.js"></script>
        {% endif %}

    {% else %}
        <script src="/templates/local/jquery.js"></script>
        <script src="/templates/local/vue.js"></script>
        <script src="/templates/local/quasar.js"></script>
    {% endif %}

    <div id="components">

    </div>

    <script>
        console.log('Quasar Version ' + Quasar.version);
        {% if page_options.dark %}
            Quasar.Dark.set(true);
        {% endif %}
    </script>

    {% include 'main.html' %}

{% endif %}
</body>
</html>
